import { mapState } from 'vuex';
// orderStatus(订单状态): 1、待确认，2、执行中，3、已完成 4、已关闭

// userStatus(子订单状态): 1、待确认，2、待响应，3、已响应，4、已取消，5、执行中，6、已完成，7、已终止

import statusEnd from '@/assets/medium/status_end.png';
import statusCancel from '@/assets/medium/status_cancel.png';
import statusComplete from '@/assets/medium/status_complete.png';
import statusIsResponse from '@/assets/medium/status_isresponse.png';
import statusNotResponse from '@/assets/medium/status_notresponse.png';
import statusNone from '@/assets/medium/status_none.png';
import statusIng from '@/assets/medium/status_ing.png';

export default {
  name: 'MediumOpeartor',
  props: {
    orderStatus: {
      type: Number,
      default: 1
    },
    index: {
      type: Number,
      default: 1,
      required: true
    },
    userListType: {
      type: String,
      default: '' // mediumRecommendList
    },
    userData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'userAuthType': state => state.medium.userAuthType
    }),
    isAdmin() {
      return this.userAuthType === 3;
    },
    isSales() {
      return this.userAuthType === 1;
    },
    isMedium() {
      return this.userAuthType === 2;
    },
    // 媒介推荐列表的达人，只有销售和达人自己能操作
    banEditAuth() {
      const isSelf = this.userData.isSelf;
      return this.userListType === 'mediumRecommendList' && this.isMedium && !isSelf;
    }
  },
  data() {
    return {
      loading: false,
      statusEnd, statusCancel, statusComplete,
      statusIsResponse, statusNotResponse, statusNone, statusIng
    };
  },
  methods: {
    /** 操作相关 */
    // 销售确认和取消达人
    confirmUser(type) {
      if (this.loading) return;
      // type: 1:确认 2: 取消
      this.$emit('confirmUser', { data: this.userData, type, index: this.index });
    },
    saleEndOrder() {
      if (this.loading) return;
      this.$emit('saleEndOrder', { data: this.userData, index: this.index });
    },
    deleteUser() {
      if (this.loading) return;
      this.$emit('deleteUser', { data: this.userData, index: this.index });
    },
    // 媒介响应和取消达人
    responseUser(type) {
      if (this.loading) return;
      // type: 1：响应 2: 取消
      this.$emit('responseUser', { data: this.userData, type, index: this.index });
    },
    complateUser() {
      if (this.loading) return;
      this.$emit('complateUser', { data: this.userData, index: this.index });
    },
    // 文案渲染
    statusText() {
      const status = this.userData.status;
      const orderStatus = this.orderStatus;
      switch (status) {
        case 1:
          // 订单状态为待确认(orderStatus:1)时，销售和管理员可以对待确认(status:1)的子订单进行确认操作
          if ((this.isSales || this.isAdmin) && orderStatus === 1) {
            return this.confirm();
          }
          return (<div class='opeartor-container'><div class='item'><img src={this.statusNone} />询单中</div></div>);
        case 2:
          // 订单状态为待确认(orderStatus:1)时，媒介和管理员可以对待响应(status:2)的子订单进行响应
          if (this.isAdmin && orderStatus === 1) {
            return this.adminResponse();
          }
          if (this.isMedium && orderStatus === 1 && !this.banEditAuth) {
            return this.response();
          }
          if (this.isSales && orderStatus === 1) {
            return this.notResponse();
          }
          return (<div class='opeartor-container'><div class='item'><img src={this.statusNotResponse} />询单中</div></div>);
        case 3:
          return (<div class='opeartor-container'><div class='item'><img src={this.statusIsResponse} />已响应</div></div>);
        case 4:
          return (<div class='opeartor-container'><div class='item'><img src={this.statusCancel} />已取消</div></div>);
        case 5:
          // 订单状态为执行中(orderStatus:2)时，销售和管理员可以对执行中(status:5)的子订单进行终止
          // 订单状态为执行中(orderStatus:2)时，媒介和管理员可以对执行中(status:5)的子订单进行完成
          if (this.isAdmin && orderStatus === 2) {
            return this.adminComplate();
          } else if (this.isMedium && orderStatus === 2 && !this.banEditAuth) {
            return this.complate();
          } else if (this.isSales && orderStatus === 2) {
            return this.orderEnd();
          }
          return (<div class='opeartor-container'><div class='item'><img src={this.statusIng} />执行中</div></div>);
        case 6:
          return (<div class='opeartor-container'><div class='item'><img src={this.statusComplete} />已完成</div></div>);
        case 7:
          return (<div class='opeartor-container'>
            <div class='is-cancel item'><img src={this.statusEnd} />已终止</div>
          </div>);
      }
    },
    loadingText(loading) {
      return loading ? (
        <i class='el-icon-loading' style='margin-right: 3px;' />
      ) : '';
    },
    /**
     * 操作渲染
     */
    // 确认和删除
    confirm() {
      return (
        <div class='opeartor-container'>
          <div
            onClick={() => {
              this.confirmUser(1);
            }}
            class='btn-style hover'
            style='margin-right: 20px'
          >{this.loadingText(this.loading)}确认</div>
          <div
            onClick={() => {
              this.deleteUser();
            }}
            class='btn-style'>删除</div>
        </div>
      );
    },
    // 确认和删除
    notResponse() {
      return (
        <div class='opeartor-container'>
          <div class='not-response item'><img src={this.statusNotResponse} />待响应</div>
          <div
            onClick={() => {
              this.deleteUser();
            }}
            class='btn-style'>删除</div>
        </div>
      );
    },
    // 终止
    orderEnd() {
      return (
        <div class='opeartor-container'>
          <div class='item' style='margin-right: 20px'><img src={this.statusIng} />执行中</div>
          <div
            onClick={() => { this.saleEndOrder(); }}
            class='btn-style to-end'
          >终止</div>
        </div>
      );
    },
    // 超级管理员的响应状态
    adminResponse() {
      return (
        <div class='opeartor-container'>
          <div
            onClick={() => {
              this.responseUser(1);
            }}
            class='btn-style hover'
            style='margin-right: 20px'
          >{this.loadingText(this.loading)}响应</div>
          <div
            onClick={() => {
              this.responseUser(2);
            }}
            class='btn-style to-end'
            style='margin-right: 20px'
          >{this.loadingText(this.loading)}取消</div>
          <div
            onClick={() => {
              this.deleteUser();
            }}
            class='btn-style'>删除</div>
        </div>
      );
    },
    // 响应
    response() {
      return (
        <div class='opeartor-container'>
          <div
            onClick={() => {
              this.responseUser(1);
            }}
            class='btn-style hover'
            style='margin-right: 20px'
          >{this.loadingText(this.loading)}响应</div>
          <div
            onClick={() => {
              this.responseUser(2);
            }}
            class='btn-style to-end'
          >{this.loadingText(this.loading)}取消</div>
        </div>
      );
    },
    // 完成
    complate() {
      return (
        <div class='opeartor-container'>
          <div
            onClick={() => {
              this.complateUser();
            }}
            class='btn-style hover'
            style='margin-right: 20px'
          >{this.loadingText(this.loading)}完成</div>
          <div
            onClick={() => {
              this.responseUser(2);
            }}
            class='btn-style to-end'
          >{this.loadingText(this.loading)}取消</div>
        </div>
      );
    },
    adminComplate() {
      return (
        <div class='opeartor-container'>
          <div
            onClick={() => {
              this.complateUser();
            }}
            class='btn-style hover'
            style='margin-right: 20px'
          >{this.loadingText(this.loading)}完成</div>
          <div
            onClick={() => { this.saleEndOrder(); }}
            class='btn-style to-end'
            style='margin-right: 20px'
          >{this.loadingText(this.loading)}终止</div>
          <div
            onClick={() => {
              this.responseUser(2);
            }}
            class='btn-style to-end'
          >{this.loadingText(this.loading)}取消</div>
        </div>
      );
    }
  },
  render(h) {
    return this.statusText();
  }
};
